<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <!--<link rel="stylesheet" href="./css/font.css">-->
        <link rel="stylesheet" href="./css/index.css">
        <link rel="stylesheet" href="./css/iconfont.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/index.js"></script>
        <script src="./js/jquery.js"></script>
        <script src="./js/jquery.min.js"></script>
       <!--  <script src="./js/survey.js"></script> -->
        <style>
            #FontScroll{
                width: 100%;
                height: 245px;
                overflow: hidden;
            }
            #FontScroll ul li{
                height: 32px;
                width: 100%;
                color: #ffffff;
                line-height: 32px;
                overflow: hidden;
                font-size: 14px;
            }
            #FontScroll ul li i{
                color: red;
            }
            .layui-table td, .layui-table th{
                min-width: auto !important;
            }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                           <div id="firstPieChart" style="width:100%; height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script>
    function loadOneColumn() {
        var myChart = echarts.init(document.getElementById('firstPieChart'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            color: ['#ff7d27', '#47b73d', '#fcc36e', '#57a2fd', "#228b22"],//饼图颜色
            title: {
                text: '歌曲风格热度排行',
                x:'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },        
            legend: {
                orient: 'vertical',
                x: 'left',
                data: []
            },        
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },         
            series: [{
                name: '歌曲风格热度排行',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],            
                data: []
            }]        
        });
        myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var names = [];    //类别数组（用于存放饼图的类别）
        var brower = [];
        $.ajax({
            type: 'get',
            url: '../ReportForm',//请求数据的地址
            data:{
            	op:"pie"
            },
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result, function (index, item) {
                    names.push(item.styleName);    //挨个取出类别并填入类别数组 
                    brower.push({
                        name: item.styleName,
                        value: item.countLikeNumber
                    });
                });
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表                
                    legend: {                    
                        data: names
                    },
                    series: [{                    
                        data: brower
                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    };
    loadOneColumn();
    
    </script>

</html>